<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            perspective: 800px;
            position: absolute;
            left: calc(50% - 200px);
            top: calc(50% - 50px);
        }

        .container {
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right, #008c8c, #00ffff);

            border-radius: 8px;
            text-align: center;
            color: #fff;
            line-height: 100px;
            font-size: 2rem;
            letter-spacing: 4px;
            cursor: pointer;
            transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
            transition: all 0.5s ease;
            transform-style: preserve-3d;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="container">
            css变量 css新世界
        </div>
    </div>

    <script>
        const container = document.querySelector('.container');
        const rect = container.getBoundingClientRect();
        container.addEventListener('mousemove', (e) => {
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            container.style.setProperty('--rx', `${-(y - rect.height / 2)}deg`)
            container.style.setProperty('--ry', `${(x - rect.width / 2) / 15}deg`)
        })

        container.addEventListener('mouseleave', (e) => {
            container.style.setProperty('--rx', "0deg")
            container.style.setProperty('--ry', "0deg")
        })
    </script>
</body>

</html>